<template>
  <view>
    <u-navbar title="维修列表" :is-back="false" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />
    <view
        class="sticky z-4"
        id="container"
        :style="{top:`${top}px`}"
    >
      <u-tabs
          :bold="false"
          :current="tabsCurrent"
          :is-scroll="false"
          :list="list"
          active-color="#2D8CF0"
          bar-height="10"
          :bar-width="barWidth"
          duration="0"
          @change="change"
      ></u-tabs>
      <u-line
          color="#CCCCCC"
          length="94%"
          margin="-5rpx 0 0 20rpx"
      />
      </view>
    <fix-unreceive v-if="tabsCurrentName === '待分配' " ref="listComponent" :isManagerOrAdmin="isManagerOrAdmin"></fix-unreceive>
    <fix-undone v-else-if="tabsCurrentName === '待完成' " ref="listComponent" ></fix-undone>
    <fix-done v-else-if="tabsCurrentName === '已完成' " ref="listComponent" ></fix-done>
    <fix-all v-else-if="tabsCurrentName === '全部工单' " ref="listComponent" :isManagerOrAdmin="isManagerOrAdmin"></fix-all>
    <custom-u-tabbar></custom-u-tabbar>
  </view>
</template>

<script>
import CustomUTabbar from "../components/CustomUTabbar";
import getNavBarHeight from "@/mixins/getNavBarHeight";
import FixUnreceive from "./components/FixUnreceive";
import FixDone from "./components/FixDone";
import FixUndone from "./components/FixUndone";
import FixAll from './components/FixAll';

export default {
  name: "fix",
  components: { CustomUTabbar, FixAll ,FixUndone ,FixDone , FixUnreceive },
  mixins:[getNavBarHeight],
  data() {
    return {
      tabsCurrent: 1,
      //标签下方滑块宽度
      barWidth:'',
      list: [],
      isManagerOrAdmin:false,
      tabsCurrentName: '待完成',
    }
  },
  onShow(){
    if(this.$store.getters.isFromHome2Work && this.$store.getters.tabsCurrent !== this.tabsCurrent){
      this.tabsCurrent = this.$store.getters.tabsCurrent
    }
    if(this.list.length===0){
      //是否驻场经理或管理员
      this.isManagerOrAdmin = this.$auth.hasRoleOr(['manager','admin','co-admin'])
      const isEngineer = this.$auth.hasRole('engineer')
      const allWorkOrderList = this.$auth.hasPermiOr(['repair:workOrder:list'])
      const selfWorkOrderList = this.$auth.hasPermiOr(['repair:workOrder:assignSelf'])
      if(this.isManagerOrAdmin && allWorkOrderList){
        this.barWidth = 130
        this.list = [{ name: "待分配"},{name: "待完成"},{name: "已完成"},{name: "全部工单"}]
      }else if(selfWorkOrderList && isEngineer){ //工程师能看到待完成、已完成列表
        this.barWidth = 350
        this.tabsCurrent = 0
        this.list = [{name: "待完成"},{name: "已完成"}]
      }
    }
    this.tabsCurrentName = this.list[this.tabsCurrent]?.name || '待完成'
  },
  onHide(){
    this.tabsCurrentName  = ''
  },
  onReachBottom(){
    this.$refs.listComponent.reachBottom();
  },
  methods:{
    //切换tab
    change(index) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      })
      this.tabsCurrent = index;
      this.tabsCurrentName = this.list[index].name
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
/deep/.u-dropdown__menu{
  padding-right: 40rpx;
  background-color: #FFFFFF;
}
/deep/.u-dropdown__menu__item{
  justify-content: flex-end !important;
  align-items: flex-end !important;
  padding-bottom: 30rpx !important;
}
/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}
/deep/.u-flex{
  border: 2rpx solid #2D8CF0;
  border-radius: 5rpx;
  width: 180rpx;
  display: flex;
  justify-content: space-evenly;
}
/deep/.u-dropdown__menu__item__text{
  font-size: 30rpx !important;
  line-height: 60rpx !important;
  white-space: nowrap;
  overflow: hidden;
}
/deep/ .u-checkbox{
  width: 100% !important;
  display: flex !important;
}
/deep/ .u-checkbox__label{
  flex: 1 !important;
}
/deep/.uicon-arrow-down-fill{
  color: #2D8CF0 !important;
}
</style>

